<template>
  <div>
    <a-modal 
      v-model='visible_dialog' 
      @cancel='handleCancel' 
      width='35%'
      :maskClosable='false'
			v-dragModal
    >
      <template slot="title">
				<img class="error-img" src="../../../../../static/images/disk_check/16_f_ic_unsure.png" alt="error_img"/>
				<span class="weight">{{$t('Tip')}}</span>
			</template>
      <div v-if="$store.state.language=='zh'" style="color:#333">
				取消客户端与LUN的关联将导致客户端无法使用LUN，LUN上的数据则依旧保留，后续可重新关联LUN找回数据，如后续关联LUN时忘记对应的LUN，可通过操作日志查看记录。
				<div>
				如您确定要进行操作，请输入以下文字后点击确定。
				</div>
			</div>
			<div v-else style="color:#333">
				Canceling the association between the client and the Lun will cause the client to be unable to use the Lun, and the data on the Lun will remain. Later, you can re associate the Lun to retrieve the data. If you forget the corresponding Lun when associating the Lun, you can view the record through the operation log.
				<div>
				If you are sure to operate, please enter the following text and click OK.
				</div>
			</div>
			<div class="sure-text">{{$t('Know-and-continue')}}</div>
			<a-input v-model="confirmValue" :placeholder="$t('Enter-top-text')"></a-input>
			<template slot="footer">
				<a-button key="back" @click="handleCancel" style="width: 80px;">
				{{$t('Cancel')}}
				</a-button>
				<a-button key="submit" type="primary" class="destroy-btn" @click="handleCancelClient" 
							:disabled="(confirmValue=='我已知情，确定要继续操作！' || confirmValue=='I have been informed and am sure to continue!')?false:true"
							:loading="isLoadingBtn">
				{{$t('Sure')}}
				</a-button>
        <!-- :loading="delOsdSpinning" -->
			</template>
    </a-modal>
  </div>
</template>

<script>
import request from '@/request/request'

export default {
  name: "CancelLunClient",
  props: ['visible', 'targetClient'],
  data() {
    return {
      visible_dialog: false,
      confirmValue: '',
			isLoadingBtn: false,
    }
  },
  mounted() {
    this.visible_dialog = this.visible;
  },
  methods: {
    //确定取消客户端授权
    handleCancelClient() {
			this.isLoadingBtn = true;
      request('DELETE', 'block/iscsi/',{
        // data:{
          target: this.targetClient.target,
          iqn: this.targetClient.name, //客户端名称
					force: 1,
          // target: _this.targets,
          // iqn: _this.target //客户端名称
        // }			
		  }).then(res=>{
        this.$emit('forceCancelCLient', res)
			}).finally(() => {
				this.isLoadingBtn = false;
			})
    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeLunClientDialog')
    },
  },
}
</script>
<style scoped>
  .weight {
		font-weight: 700;
	}
  .error-img {
		vertical-align: text-bottom;
		margin-right: 5px;
	}
  .sure-text {
		text-align: center;
		color: var(--mainRedColor);
		font-weight: 700;
		padding: 4px 0;
		background-color: rgba(253, 52, 85, 0.1);
		border-left: 2px solid var(--mainRedColor);
		margin: 15px 0 10px;
	}
  .destroy-btn {
		width: 80px;
		background-color: var(--mainRedColor);
		border-color: var(--mainRedColor);
	}
	.destroy-btn[disabled] {
    width: 80px;
		color: rgba(0,0,0,.25);
		background-color: #f5f5f5;
		border-color: #d9d9d9;
	}
</style>